<template>
  <div class="app-container">
    <!-- left -->
    <el-row :gutter="10">
      <!-- right -->
      <el-col :span="24">
        <!-- 显示表格区域 -->
        <div class="container" v-if="bol">
          <hot-table :settings="hotSettings"> </hot-table>
        </div>
        <!-- 配置区域 -->
        <el-form
          ref="queryForm"
          inline
          label-position="left"
          :model="queryParams"
          class="handler"
        >
          <fieldset>
            <legend class="legend">
              <span>模板操作</span>
            </legend>
            <div class="handler">
              <el-row>
                <!-- 行数 -->
                <el-col :span="8">
                  <el-form-item
                    label="行数:"
                    prop="rows"
                    :rules="[{ type: 'number', message: '行数必须为数字值' }]"
                  >
                    <el-input
                      v-model.number="queryParams.rows"
                      maxlength="3"
                      @input="createRows"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 刷屏模式 -->
                <el-col :span="8">
                  <el-form-item label="刷屏模式:">
                    <el-select
                      v-model="queryParams.screen"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in screen"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 显示模式 -->
                <el-col :span="8">
                  <el-form-item label="显示模式:">
                    <el-select
                      v-model="queryParams.display"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 列数 -->
                <el-col :span="8">
                  <el-form-item
                    label="列数:"
                    prop="column"
                    :rules="[{ type: 'number', message: '列数必须为数字值' }]"
                  >
                    <el-input
                      v-model.number="queryParams.column"
                      maxlength="3"
                      @input="createColumn"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 背景颜色 -->
                <el-col :span="8">
                  <el-form-item label="背景颜色:">
                    <el-select
                      v-model="queryParams.backgroundColor"
                      placeholder="请选择"
                      @change="changeBackgroundColor"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in backgroundColor"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 标题颜色 -->
                <el-col :span="8">
                  <el-form-item label="标题颜色:">
                    <el-select
                      v-model="queryParams.titleColor"
                      placeholder="请选择"
                      class="select_width"
                      @change="changeTitleColor"
                    >
                      <el-option
                        v-for="item in titleColor"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 宽度 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="宽度:"
                    prop="width"
                    :rules="{ type: 'number', message: '宽度必须为数字值' }"
                  >
                    <el-input
                      v-model.number="queryParams.width"
                      maxlength="4"
                      @change="changeWidth"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 边框颜色 -->
                <el-col :span="8">
                  <el-form-item label="边框颜色:">
                    <el-select
                      v-model="queryParams.borderColor"
                      placeholder="请选择"
                      @change="changeBorderColor"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in borderColor"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 内容颜色 -->
                <el-col :span="8">
                  <el-form-item label="内容颜色:">
                    <el-select
                      v-model="queryParams.contentColor"
                      placeholder="请选择"
                      @change="changeContentsColor"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in contentsColor"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 高度 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="高度:"
                    prop="height"
                    :rules="{ type: 'number', message: '高度必须为数字值' }"
                  >
                    <el-input
                      v-model.number="queryParams.height"
                      maxlength="4"
                      @change="changeHeight"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 标题字体 -->
                <el-col :span="8">
                  <el-form-item label="标题字体:">
                    <el-select
                      v-model="queryParams.titleFont"
                      placeholder="请选择"
                      class="select_width"
                      @change="changeTitleFont"
                    >
                      <el-option
                        v-for="item in titlesFont"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 内容字体 -->
                <el-col :span="8">
                  <el-form-item label="内容字体:">
                    <el-select
                      v-model="queryParams.contentFont"
                      placeholder="请选择"
                      class="select_width"
                      @change="changeContentFont"
                    >
                      <el-option
                        v-for="item in contentsFont"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 列宽 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="列宽:"
                    prop="ColumnWidth"
                    :rules="{ type: 'number', message: '列宽必须为数字值' }"
                  >
                    <el-input
                      v-model.number="queryParams.ColumnWidth"
                      maxlength="4"
                      :disabled="disabled"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 上边距离 -->
                <el-col :span="8">
                  <el-form-item
                    label="上边距离:"
                    prop="topPadding"
                    :rules="{ type: 'number', message: '上边距离必须为数字值' }"
                  >
                    <el-input
                      v-model.number="queryParams.topPadding"
                      maxlength="3"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 标题行高 -->
                <el-col :span="8">
                  <el-form-item
                    label="标题行高:"
                    prop="titleHeight"
                    :rules="[
                      { type: 'number', message: '标题行高必须为数字值' }
                    ]"
                  >
                    <el-input
                      v-model.number="queryParams.titleHeight"
                      maxlength="3"
                      @change="changeLineHeight"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 左边距离 -->
              <el-row>
                <el-col :span="8">
                  <br />
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="左边距离:"
                    prop="leftPadding"
                    :rules="{ type: 'number', message: '左边距离必须为数字值' }"
                  >
                    <el-input
                      v-model.number="queryParams.leftPadding"
                      maxlength="3"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- 停留时间 -->
                <el-col :span="8">
                  <el-form-item
                    label="停留时间:"
                    prop="timer"
                    :rules="[
                      {
                        type: 'number',
                        message: '停留时间必须为数字值'
                      }
                    ]"
                  >
                    <el-input
                      placeholder="每页停留时间"
                      v-model.number="queryParams.timer"
                      maxlength="5"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- Checkbox 固定列宽 -->
                <el-form-item>
                  <el-checkbox v-model="queryParams.isFixation"
                    >固定列宽</el-checkbox
                  >
                </el-form-item>
                <!-- Checkbox 是否启用标题 -->
                <el-form-item>
                  <el-checkbox
                    v-model="queryParams.startTitle"
                    @change="changeTitle"
                    >是否启用标题</el-checkbox
                  >
                </el-form-item>
                <!-- Checkbox 是否启用边框 -->
                <el-form-item>
                  <el-checkbox
                    v-model="queryParams.startBorder"
                    @change="changeBorder"
                    >是否启用边框</el-checkbox
                  >
                </el-form-item>
              </el-row>
              <!-- 发送 保存 -->
              <el-form-item
                style="display:flex;justify-content:center;margin-top:20px"
              >
                <el-button type="primary" @click="send">发送</el-button>
                <el-button type="primary">保存</el-button>
              </el-form-item>
            </div>
          </fieldset>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.min.css'
import { HotTable, HotColumn } from '@handsontable/vue'
export default {
  components: { HotTable, HotColumn },
  data () {
    return {
      table: undefined,
      options: [],
      bol: true,
      queryParams: {
        rows: undefined, // 行数
        column: undefined, // 列数
        width: undefined, // 宽度
        height: undefined, // 高度
        ColumnWidth: undefined, // 列宽
        screen: undefined, // 刷屏模式
        backgroundColor: undefined, // 背景颜色
        borderColor: undefined, // 边框颜色
        titleFont: undefined, // 标题字体
        topPadding: undefined, // 上边距离
        leftPadding: undefined, // 左边距离
        display: undefined, // 显示模式
        titleColor: undefined, // 标题颜色
        contentColor: undefined, // 内容颜色
        contentFont: undefined, // 内容字体
        titleHeight: undefined, // 标题行高
        timer: undefined, // 停留时间
        isFixation: false, // 固定列宽
        startTitle: false, // 是否启用标题
        startBorder: false // 是否启用边框
      },
      // 刷屏模式
      screen: [
        // 字体内容
        {
          value: '1',
          label: '独占,并且指定背景颜色'
        },
        {
          value: '2',
          label: '以系统播放的节目信息'
        },
        {
          value: '3',
          label: '以系统播放的节目信息'
        },
        {
          value: '4',
          label: '指定节目ID为背景(透明)'
        },
        {
          value: '5',
          label: '指定节目ID为背景(非透明)'
        },
        {
          value: '6',
          label: '指定素材ID为背景(透明)'
        },
        {
          value: '7',
          label: '指定素材ID为背景(非透明)'
        }
      ],
      // 背景颜色
      backgroundColor: [
        {
          value: 'red',
          label: '红色'
        },
        {
          value: 'green',
          label: '绿色'
        },
        {
          value: 'yellow',
          label: '黄色'
        },
        {
          value: 'blue',
          label: '蓝色'
        },
        {
          value: 'purple',
          label: '紫色'
        },
        {
          value: 'cyan',
          label: '青色'
        },
        {
          value: 'white',
          label: '白色'
        },
        {
          value: 'black',
          label: '黑色'
        }
      ],
      // 边框颜色
      borderColor: [
        {
          value: 'red',
          label: '红色'
        },
        {
          value: 'green',
          label: '绿色'
        },
        {
          value: 'yellow',
          label: '黄色'
        },
        {
          value: 'blue',
          label: '蓝色'
        },
        {
          value: 'purple',
          label: '紫色'
        },
        {
          value: 'cyan',
          label: '青色'
        },
        {
          value: 'white',
          label: '白色'
        }
      ],
      // 标题颜色
      titleColor: [
        {
          value: 'red',
          label: '红色'
        },
        {
          value: 'green',
          label: '绿色'
        },
        {
          value: 'yellow',
          label: '黄色'
        },
        {
          value: 'blue',
          label: '蓝色'
        },
        {
          value: 'purple',
          label: '紫色'
        },
        {
          value: 'cyan',
          label: '青色'
        },
        {
          value: 'white',
          label: '白色'
        }
      ],
      // 标题字体
      titlesFont: [
        {
          value: '8',
          label: '8'
        },
        {
          value: '12',
          label: '12'
        },
        {
          value: '24',
          label: '24'
        },
        {
          value: '32',
          label: '32'
        },
        {
          value: '48',
          label: '48'
        },
        {
          value: '64',
          label: '64'
        }
      ],
      // 内容颜色
      contentsColor: [
        {
          value: 'red',
          label: '红色'
        },
        {
          value: 'green',
          label: '绿色'
        },
        {
          value: 'yellow',
          label: '黄色'
        },
        {
          value: 'blue',
          label: '蓝色'
        },
        {
          value: 'purple',
          label: '紫色'
        },
        {
          value: 'cyan',
          label: '青色'
        },
        {
          value: 'white',
          label: '白色'
        }
      ],
      // 内容字体
      contentsFont: [
        {
          value: '8',
          label: '8'
        },
        {
          value: '12',
          label: '12'
        },
        {
          value: '24',
          label: '24'
        },
        {
          value: '32',
          label: '32'
        },
        {
          value: '48',
          label: '48'
        },
        {
          value: '64',
          label: '64'
        }
      ],
      disabled: false,
      displayColumn: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      // Handsontable数据
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(8, 8),
        rowHeaders: true,
        colHeaders: true,
        width: 'auto',
        height: 'auto',
        licenseKey: 'non-commercial-and-evaluation'
      }
    }
  },
  methods: {
    // 创建行数
    createRows () {
      this.bol = false
      this.$nextTick(() => {
        this.hotSettings.data = Handsontable.helper.createSpreadsheetData(
          this.queryParams.rows,
          this.queryParams.column
        )
        this.bol = true
      })
    },
    // 创建列数
    createColumn () {
      this.bol = false
      this.$nextTick(() => {
        this.hotSettings.data = Handsontable.helper.createSpreadsheetData(
          this.queryParams.rows,
          this.queryParams.column
        )
        this.bol = true
      })
    },
    // 内容字体
    changeContentFont () {
      for (let i = 0; i < this.table.tBodies[0].rows.length; i++) {
        this.table.tBodies[0].rows[i].style.fontSize =
          this.queryParams.contentFont + 'px'
      }
    },
    // 改变边框颜色
    changeBorderColor () {
      this.table.style.border = `1px solid ${this.queryParams.borderColor}`
    },
    // 宽度
    changeWidth () {
      this.hotSettings.width = this.queryParams.width
    },
    // 高度
    changeHeight () {
      this.hotSettings.height = this.queryParams.height
    },
    // 背景颜色
    changeBackgroundColor () {
      this.table.style.backgroundColor = this.queryParams.backgroundColor
    },
    // 字体颜色
    changeContentsColor () {
      for (let i = 0; i < this.table.tBodies[0].rows.length; i++) {
        this.table.tBodies[0].rows[
          i
        ].style.color = this.queryParams.contentColor
      }
    },
    // 是否启用边框
    changeBorder () {
      // 边框有值
      if (this.queryParams.startBorder) {
        if (this.table) {
          this.table.border = 1
          this.table.style.border = `1px solid ${this.queryParams.borderColor ||
            'red'}`
        }
      } else {
        // 不启用边框,表格有对象
        if (this.table) {
          this.table.border = 0
          this.table.style.border = 0
        } else {
          return // 边框没值否则返回
        }
      }
    },
    // 是否启用标题
    changeTitle () {
      this.hotSettings.rowHeaders = this.queryParams.startTitle
      this.hotSettings.colHeaders = this.queryParams.startTitle
    },
    // 标题字体
    changeTitleFont () {
      this.table.tHead.style.fontSize = this.queryParams.titleFont + 'px'
    },
    // 标题颜色
    changeTitleColor () {
      this.table.tHead.style.color = this.queryParams.titleColor
    },
    // 标题行高
    changeLineHeight () {
      this.table.tHead.style.lineHeight = this.queryParams.lineHeight
    },
    send () {}
  },
  mounted () {},
  watch: {}
}
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  .handler {
    padding: 10px;
    background-color: #a7c0dc;
  }
  .legend {
    width: 90px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    background-color: #286090;
    padding: 0px 20px;
    border-radius: 10px;
    position: relative;
    span {
      position: absolute;
      left: 15%;
    }
  }
}
::v-deep .container {
  min-width: 1000px;
  min-height: 200px;
  max-height: 300px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: 10px;
  background-color: #cdd3ca;
  padding: 0 0 10px 0;
}
.el-form--inline .el-form-item {
  margin-bottom: 20px;
}
::v-deep span.el-checkbox__label {
  padding-left: 5px;
}
// 自动移滚动条样式 css实现滚动条兼容mac和windows
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: #a8a8a8;
}
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 1);
}
.el-tree__empty-text {
  color: #000 !important;
}
</style>
